<template>
  <div id="stylistInfoList">
    <div class="stylistInfoListContent">
      <div class="worksDetailNavInfo">
        <div v-show="sceneType === 'teacherList'"><p @click="handelBackSchool">校企合作</p><span>&gt;</span><p>师徒制工作室列表</p></div>
        <div v-show="sceneType === 'enterpriseList'&type!=='jiuye'"><p @click="handelBackSchool">校企合作</p><span>&gt;</span><p>创意机构列表</p></div>
        <div v-show="type === 'jiuye'&sceneType==='enterpriseList'"><p @click="handelBackJiuye">就业信息</p><span>&gt;</span><p>常驻企业列表</p></div>
        <div v-show="sceneType === 'megagameList'" ><p @click="handelBackMegagam">技能大赛</p><span>&gt;</span><p>大赛工作室列表</p></div>
        <div v-show="sceneType === 'schoolyard'"><p @click="handelBackSchool">校企合作</p><span>&gt;</span><p>园区列表</p></div>
      </div>
      <div class="teamworkContentMentoring">
        <div class="teamworkContentMentoringTitle">
          <label for="searchWorkroom">
            <input id="searchWorkroom" type="text" placeholder="请输入搜索内容" v-model="searchText" @keydown.enter="onPageChange(1)">
          </label>
          <div class="btnBox">
            <button class="btnDef" @click="onPageChange(1)">搜索</button>
          </div>
        </div>
        <div class="teamworkContentMentoringList">
          <div class="teamworkContentMentoringListTeacher">
            <ul v-show="sceneType === 'teacherList'">
              <li v-for="(item, index) in mentoringData" :key="index" @click="jumpTo('/stylistInfo?sceneType=teacher&studioId=' + item.id)">
                <img class="mentoringListImage" :src="$globalImageUrl + item.studioLogo" alt="">
                <div class="mentoringListInfo">
                  <h3 class="ellipse">{{item.studioName}}</h3>
                  <p class="ellipse"><img :src="$globalImageUrl + item.studioLogo" alt="">{{item.sponsor}} <span>{{item.introduce}}</span></p>
                </div>
              </li>
            </ul>
            <ul v-show="sceneType === 'enterpriseList'">
              <li v-for="(item, index) in enterpriseData" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id)">
                <img class="mentoringListImage" :src="$globalImageUrl + item.enterpriseLogo" alt="">
                <div class="mentoringListInfo">
                  <h3 class="ellipse">{{item.companyName}}</h3>
                  <p class="ellipse"><img :src="$globalImageUrl + item.enterpriseLogo" alt="">{{item.contacts}}</p>
                </div>
              </li>
            </ul>
            <ul v-show="sceneType === 'megagameList'">
              <li v-for="(item, index) in gameStudioData" :key="index" @click="jumpTo('/stylistInfo?sceneType=megagame&studioId=' + item.id)">
                <img class="mentoringListImage" :src="$globalImageUrl + item.studioLogo" alt="">
                <div class="mentoringListInfo">
                  <h3 class="ellipse">{{item.studioName}}</h3>
                  <p class="ellipse"><img :src="$globalImageUrl + item.studioLogo" alt="">{{item.sponsor}}</p>
                </div>
              </li>
            </ul>
            <ul v-show="sceneType === 'schoolyard'">
              <li v-for="(item, index) in schoolData" :key="index" @click="jumpTo('/schoolyard?parkId=' + item.parkId)">
                <img class="mentoringListImage" :src="$globalImageUrl + item.backImage" alt="">
                <div class="mentoringListInfo">
                  <h3 class="ellipse">{{item.parkName}}</h3>
                  <p class="ellipse"><img :src="$globalImageUrl + item.parkLogo" alt="">{{item.contacts}}</p>
                </div>
              </li>
            </ul>
          </div>
          <page-number
            :pageTotal="pageTotals"
            @prevPage="onPrevPage($event)"
            @pageActive="onPageActive($event)"
            @nextPage="onNextPage($event)"
            @pageChange="onPageChange($event)"
          ></page-number>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageNumber from '../../components/pageNumber/index'
export default {
  name: 'stylistInfoList',
  components: {
    pageNumber
  },
  data () {
    return {
      pageTotals: 1,
      sceneType: this.$route.query.sceneType,
      type: this.$route.query.type,
      gameStudioData: [],
      searchText: '',
      mentoringData: [],
      enterpriseData: [],
      schoolData: []
    }
  },
  created () {
    // if (this.sceneType === 'teacherList') {
    //   this.fetchStudioList(1)
    // } else if (this.sceneType === 'enterpriseList') {
    //   this.fetchEnterpriseList(1)
    // } else if (this.sceneType === 'megagameList') {
    //   this.fetchGameStudio(1)
    // } else if (this.sceneType === 'schoolyard') {
    //   this.fetchParkList(1)
    // }
    this.onPageChange(1)
  },
  methods: {
    onPrevPage (val) {
    },
    onPageActive (val) {
    },
    onNextPage (val) {
    },
    onPageChange (val) {
    if (this.sceneType === 'teacherList') {
      this.fetchStudioList(val)
    } else if (this.sceneType === 'enterpriseList') {
      this.fetchEnterpriseList(val)
    } else if (this.sceneType === 'megagameList') {
      this.fetchGameStudio(val)
    } else if (this.sceneType === 'schoolyard') {
      this.fetchParkList(val)
    }
    },
    // 头部搜索
    // onSearchList (val) {
    //   if (this.sceneType === 'teacherList') {
    //     this.fetchStudioList(val)
    //   } else if (this.sceneType === 'enterpriseList') {
    //     this.fetchEnterpriseList(val)
    //   } else if (this.sceneType === 'megagameList') {
    //     this.fetchGameStudio(val)
    //   } else if (this.sceneType === 'schoolyard') {
    //     this.fetchParkList(val)
    //   }
    // },
    // 获取技能大赛工作室
    fetchGameStudio (val) {
      this.$api.getGameStudio({
        pageNum: val,
        searchText: this.searchText
      }).then(res => {
        if (res.code === 0) {
          this.gameStudioData = res.data
        }
      })
    },
    // 返回技能大赛
    handelBackMegagam () {
      this.$router.push('/megagame')
    },
    // 返回校企合作
    handelBackSchool () {
      this.$router.push('/teamwork')
    },
    // 返回就业资讯
    handelBackJiuye () {
      this.$router.push('/recruiting')
    },
    // 获取师徒制工作室列表
    fetchStudioList (val) {
      this.$api.getStudioList({
        pageNum: val,
        searchText: this.searchText
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.mentoringData = res.data
          this.pageTotals = Math.ceil(res.total / 10)

        }
      })
    },
    // 获取创意机构列表
    fetchEnterpriseList (val) {
      this.$api.getEnterpriseList({
        pageNum: val,
        searchText: this.searchText
      }).then(res => {
        if (res.code === 0) {
          this.enterpriseData = res.data
          this.pageTotals = Math.ceil(res.total / 10)

        }
      })
    },
    // 获取创业园区列表
    fetchParkList (val) {
      this.$api.getParkList({
        pageNum: val,
        searchText: this.searchText
      }).then(res => {
        if (res.code === 0) {
          this.schoolData = res.data
          this.pageTotals = Math.ceil(res.total / 10)

        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#stylistInfoList{
  .stylistInfoListContent{
    width: 1200px;
    margin: auto;
    padding: .2rem 0;
    .teamworkContentMentoring{
      padding-bottom: .4rem;
      .teamworkContentMentoringTitle{
        font-size: 0;
        padding-bottom: .3rem;
        label{
          width: 80%;
          display: inline-block;
          line-height: .4rem;
          background-color: #fff;
          padding-left: .15rem;
          border-radius: .05rem;
          vertical-align: top;
          border: 1px solid rgba(0,0,0,0);
          input{
            font-size: .16rem;
            font-weight: 500;
            color: #333;
            line-height: .4rem;
            vertical-align: top;
          }
        }
        .btnBox{
          width: calc(100% - 80%);
          display: inline-block;
          vertical-align: top;
          padding-left: .2rem;
        }
      }
      .teamworkContentMentoringList{
        .teamworkContentMentoringListTeacher{
          ul{
            li:nth-child(5n) {
              margin: 0 0 .1rem 0;
            }
            li{
              display: inline-block;
              width: 2.3rem;
              margin: 0 .125rem .125rem 0;
              background-color: #fff;
              img.mentoringListImage{
                width: 2.3rem;
                height: 1.6rem;
                display: inline-block;
              }
              .mentoringListInfo{
                padding: .1rem;
                h3{
                  font-size: 0.14rem;
                  line-height: 0.2rem;
                  font-weight: 500;
                  color: #333;
                }
                span{
                  font-size: 0.12rem;
                  line-height: 0.18rem;
                  font-weight: 500;
                  color: rgba(170, 170, 170, 1);
                  padding: .05rem 0;
                  display: inline-block;
                }
                p{
                  height: 0.22rem;
                  line-height: 0.22rem;
                  font-size: 0.12rem;
                  font-weight: 500;
                  img{
                    display: inline-block;
                    width: 0.22rem;
                    height: 0.22rem;
                    border-radius: 50%;
                    vertical-align: top;
                    margin-right: .07rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
